<template>
  <c-loading :loading="false">
    <view class="container coupons">
      <coupon-box v-for="item in availableList" :key="item.relId" :item="item" :select="select" :can-use="canUse" v-model:select-id="selectId" />
      <coupon-box v-for="item in list" :key="item.relId" :item="item" :select="select" :can-use="canUse" v-model:select-id="selectId" />
      <view class="show-more" v-if="pager.finish && available" @tap="showMore">
        加载全部优惠券
        <c-icon icon="chevron-down" />
      </view>
      <c-pager v-bind="pager"></c-pager>
      <view class="fixed-footer shadow" v-if="select">
        <c-button type="primary" @tap="toSelect" v-if="selectId">确认选择</c-button>
        <c-button type="info" @tap="toSelect" v-else>不选择优惠券</c-button>
      </view>
      <view class="end"></view>
    </view>
  </c-loading>
</template>
<script setup>
import { CButton, CLoading, CRadio, CPager, CIcon } from '@/components';
import { usePager, useLoading, useRouter } from '@/hooks';
import { View } from '@tarojs/components';
import CouponBox from './components/coupon-box.vue';
import api from '@/api';
import { reactive, ref } from 'vue';

const router = useRouter();
const canUse = ref([]);
const selectId = ref('');
const select = ref(false);
const available = ref(true);
const availableList = ref([]);
useLoading((options, data) => {
  if (data) {
    select.value = data.select;
    canUse.value = data.canUse;
    selectId.value = data.selectId;
  }
});

const { list, pager, reload } = usePager({
  onPullDownRefresh(stop) {
    availableList.value = [];
    available.value = true;
  },
  handler: (skip, take) =>
    api.mk.couponGetList({
      available: available.value,
      skip,
      take
    })
});

const showMore = () => {
  available.value = false;
  availableList.value = list.value;
  reload();
};
const toSelect = () => {
  router.back(selectId.value);
};
</script>
<style lang="scss">
.coupons.container {
  padding-top: 20px; 
  .show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray);
  }
}
</style>
